<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>浏览器默认行为</title>
	</head>
	<body>
		<!-- 如果我们只想通过 JavaScript 来处理事件，那么所有默认行为都是可以被阻止的。 -->
		<!-- 可以使用 event.preventDefault() 或 return false。第二个方法只适用于通过 on<event> 分配的处理程序。 -->

		<ul id="menu" class="menu">
			<li><a href="/html">HTML</a></li>
			<li><a href="/javascript">JavaScript</a></li>
			<li><a href="/css">CSS</a></li>
		</ul>

		<!-- 阻止浏览器默认行为 -->
		<a href="http://www.baidu.com" onclick="return false">百度</a>

		<script>
			// 示例场景：只获取 href 不进行页面调整。
			const menu = document.querySelector('.menu')

			menu.addEventListener('click', (event) => {
				console.log(event.target.href)
				event.target.style.color = 'pink'

				// return false // 阻止浏览器默认行为
				event.preventDefault() // 阻止浏览器行为【主流方式】
			})
		</script>

		<!--
				浏览器默认行为：
				1. 点击一个链接 ———— 会触发导航到该 URL。
				2. 点击表单的提交按钮 ———— 触发提交到服务器。
				3. 在文本上按下鼠标按钮并移动 ———— 会选中文本。
				这些都是浏览器的默认行为。
		--></body>
</html>
